<template>
  <div class="shade" style="left: 0;" v-show="showTag">
    <div :class="tallTag?'messageBox tall':'messageBox'">
      <div :class="['prop-header', bottomLine?'b-line':'' ,'clearfix']" v-if="title">
        <span :class="bottomLine?'pull-left':'boldTxt'">{{title}}</span>
        <span class="pull-right" v-if="bottomLine" @click="_handleCancel"> <i class="iconfont icon-cha-circle"></i> </span>
      </div>
      <div :class="scrollTag?'scroll prop-panel':'prop-panel'">
        <slot></slot>
      </div>
      <div :class="['prop-footer',topLine?'t-line':'']" v-if="footTag">
        <slot name="footer">
          <el-button type="primary"
                  @click="_handleOk">{{ okText }}</el-button>
          <el-button type="primary" plain
                    v-if="cancelTag" 
                  @click="_handleCancel">{{ cancelText }}</el-button>
      </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: {
    cancelTag:{type: Boolean, default: true},
    title: {type: String, default: ''},
    okText: {type: String, default: '确定'},
    cancelText: {type: String, default: '取消'},
    showTag: {type: Boolean, default: false},
    // 默认为false 有下划线  字体加粗
    bottomLine: {type: Boolean, default: false},
    topLine:{type: Boolean, default: true},
    tallTag:{type: Boolean, default: false},
    scrollTag:{type: Boolean, default: false},
    footTag:{type: Boolean, default: true}
  },
  methods: {
    _handleCancel () {
      this.$emit('onCancel', '')
    },

    _handleOk () {
      this.$emit('onOk', '')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "../assets/less/tables";
  .shade{
    position: fixed;
    top:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 100;
  }
  .prop-header{
    padding: .5rem 1rem;
    display: flex;
    &.b-line{
      .pull-left{
        text-align: left;
      }
    }
    .pull-left{
      flex: 3;
    }
    .pull-right{
      color: @brand-danger;
    }
  }
  .prop-panel{
    padding: .8rem;
    &.scroll{
      max-height: 350px;
      overflow-y: scroll;
    }
    .ico{
      margin-right: 10px;
      vertical-align: middle;
    }
  }
  .prop-footer{
    padding: 15px;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
  }
  .boldTxt{
    font-weight: bold;
    font-size: 1rem;
  }
  .messageBox{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -350px;
    background-color: #fff;
    border-radius: .6rem;
    -webkit-user-select: none;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: .2s;
    transition: .2s;
    text-align: center;
    width: 756px;
    min-height: 100px;
    margin-top: -160px;
    .popup-wrap{
      padding: 10px 20px;
    }
    &.tall{
      margin-top: -250px !important;
    }
  }
  .t-line{
    border-top:@border;
  }
  .b-line{
    border-bottom:@border;
  }
</style>
